<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1> <%= title%> </h1>
  <button class="add-list">增加联系人</button>

  <div class="dialog hide">
    <div class="mask"></div>
    <div class="tip">

      <div class="form-content">
        name: <input type="text" class="name"><br>
        age: <input type="text" class="age"><br>
        email: <input type="email" class="email"><br>
        gender: <input type="text" class="gender"><br>
        address: <textarea class="address" id="" cols="30" rows="10">
        </textarea> <br>
      </div>
      <span class="close">取消</span>
      <span class="sure">确定</span>
    </div>
  </div>


  <div class="page-box">
    <ul class="page-content">

    </ul>
    <ol class="page-btn">

    </ol>
  </div>


  <script src="js/axios.js"></script>
  <script>

    const dialog = document.querySelector('.dialog')
    const sureBtn = document.querySelector('.sure')
    const closeBtn = document.querySelector('.close')
    const addList = document.querySelector('.add-list')
    // 分页
    const pageContent = document.querySelector('.page-content')
    const pageBtn = document.querySelector('.page-btn')
    // form
    const name = document.querySelector('.name')
    const age = document.querySelector('.age')
    const email = document.querySelector('.email')
    const gender = document.querySelector('.gender')
    const address = document.querySelector('.address')

    init()
    function init() {
      addFn()
      dialogFn()
      // getPage(0)
      getList()
    }

    // get
    function get(url, params) {
      return axios.get(url, { params })
    }

    // post
    function post(url, data) {
      return axios.post(url, data)
    }

    function addFn() {
      addList.onclick = function () {
        dialog.classList.remove('hide')
      }
    }

    function dialogFn() {
      sureBtn.onclick = function () {
        dialog.classList.add('hide')
        post('/api/add', {
          name: name.value,
          age: age.value.trim(),
          email: email.value.trim(),
          gender: gender.value.trim(),
          address: address.value.trim(),
        }).then(res => {
          console.log(res.data)
        })
      }
      closeBtn.onclick = function () {
        dialog.classList.add('hide')
      }
    }


    // {page: page, size: size}   =>  {page,size}
    // function getPage(page, size = 5) {
    //   get('/api/page', { page, size }).then(res => {
    //     if (res.data.code === 0) {
    //       let data = res.data.data
    //       console.log(data, 'res')
    //       // 调用渲染函数
    //       renderHtml(data)
    //       deleteFn()
    //     }
    //   })
    // }

    function renderHtml(data) {
      pageContent.innerHTML = data.map((item, index) => {
        return `<li>
            <span> ${item.id}</span>
            <span>${item.name}</span>
            <span>${item.age}</span>
            <span>${item.email}</span>
            <span>${item.gender}</span>
            <span>${item.address}</span>
            <button data-id=${item.id} class="update-btn">更改</button>
            <button data-id=${item.id} class="delete-btn">删除</button>
          </li>`
      }).join('')
    }

    function deleteFn() {
      const deleteBtn = document.querySelectorAll('.delete-btn')
      deleteBtn.forEach((item, index) => {
        item.onclick = function () {
          get('/api/delete', { index }).then(res => {
            console.log(res, 'res')
            getList()
          })
        }
      })
    }

    // 列表
    function getList() {
      get('/api/list').then(res => {
        if (res.data.code === 0) {
          let data = res.data.data
          console.log(data, 'res')
          // 调用渲染函数
          renderHtml(data)
          deleteFn()
        }
      })
    }
  </script>
</body>

</html>